<%@page import="servlets.SearchJob"%>
<%@page import="java.util.*"%>
<%@ page import="beans.DBHelper, java.sql.*" language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Job Search</title>

<link rel="stylesheet"
	href="http://cdn.bootcss.com/bootstrap/3.2.0/css/bootstrap.min.css">

<style>
#btn{
	width:100px;
	margin-left:30px;
}
	
table{
	margin-left:30px;
}

#checkTable{
	background-color:#FFFFBB;
}
</style>

</head>
<script type="text/javascript">
var req;
function ajaxCall() {
	var salary = "salary=" + encodeURI(document.search.providesalary.value);
	var address = "&address=" + encodeURI(document.search.region.value);
	var companysize = "&companysize=" + encodeURI(document.search.companysize.value);
	var companytype = "&companytype=" + encodeURI(document.search.cotype.value);
	var jobtype = "&jobtype=" + encodeURI(document.search.jobterm.value);
	
	var url = "SearchJob";
	
	//checking browser type and creating XMLHttpRequest accordingly
	if (window.XMLHttpRequest) {
		req = new XMLHttpRequest();
	} else if (window.ActiveXObject) {
		req = new ActiveXObject("Microsoft.XMLHTTP"); //For old IE(ie6 or early)
	}

	req.open("POST", url, true);
	req.onreadystatechange = callback;
	req.setRequestHeader("Content-Type",
			"application/x-www-form-urlencoded");
	req.setRequestHeader("Content-length", salary.length+address.length+companysize.length+companytype.length+jobtype.length);
	req.setRequestHeader("Connection", "close");
	req.send(salary+address+companysize+companytype+jobtype);
	
}
function callback() {
	if (req.readyState == 4) {
		if (req.status == 200) {
			// update the HTML DOM based on whether or not message is valid
			//clean();
			parseMessage();
		}
	}
}
function parseMessage() {
	var message = req.responseText;
	if(message.indexOf(",") >= 0)
	{
		setMessage(message);
	}else
	{
		mess.innerHTML = "<div style=\"color:green\">"+message+"</ div>";
	}
	
}
function setMessage(message) {
		
		var message0 = message.substring(1,message.length-1).split(",");
		var j = 0;
		var mes = new Array("JOBID","COMPANY","SALARY","ADDRESS","COMPANYSIZE","COMPANYTYPE","JOBTYPE","PROVIDER")
		var tpp= document.getElementById("checkTable");
		var tbody=document.createElement("tbody");
		var tr=document.createElement("tr");
		while(j<8)
		{
			var va = document.createTextNode(mes[j]);
			var td=document.createElement("td");
			td.appendChild(va);
			tr.appendChild(td);
			j++;
		}
		tbody.appendChild(tr);
		tpp.appendChild(tr);
		
		var tr=document.createElement("tr");
		for(i=0;i<message0.length;)
		{
			while(i%8!=0|i==0)
			{
				var va = document.createTextNode(message0[i]);
				var td=document.createElement("td");
				td.appendChild(va);		
				tr.appendChild(td);	
				i++;
			}			
			tbody.appendChild(tr);
			tpp.appendChild(tr);	
			if(i%8==0)
			{
				var td = document.createElement("td");
				var app = document.createElement("input");
		        app.type="button";
		        app.value = "Apply";
		        app.id = i/8;
		        app.onclick = function dofor()
		        {
		        	var job = "job=" + message0[(this.id-1)*8];
		        	
		        	var provider = "&provider=" + message0[8*this.id-1];
		        	alert("Apply Success !!");
		        	
		        	var url = "Apply";
		        	
		        	if (window.XMLHttpRequest) {
		        		req = new XMLHttpRequest();
		        	} else if (window.ActiveXObject) {
		        		req = new ActiveXObject("Microsoft.XMLHTTP"); //For old IE(ie6 or early)
		        	}
		        	
		        	req.open("POST", url, true);
		        	req.onreadystatechange = callback;
		        	req.setRequestHeader("Content-Type",
		        			"application/x-www-form-urlencoded");
		        	req.setRequestHeader("Content-length", job.length+provider.length);
		        	req.setRequestHeader("Connection", "close");
		        	req.send(job+provider);
		        }

		        td.appendChild(app);
		        tr.appendChild(td);
				
				var tr=document.createElement("tr");
				var va = document.createTextNode(message0[i]);
				var td=document.createElement("td");
				td.appendChild(va);
				tr.appendChild(td);
				i++;
			}					
		}
	
}
function clean(){ 
	var tb = document.getElementById('checkTable');
    var rowNum=tb.rows.length;
    mess.innerHTML = "<div style=\"color:red\">"+""+"</ div>";
    if(rowNum>0)
    {
    	 for (i=0;i<rowNum;i++)
    	    {
    	        tb.deleteRow(i);
    	        rowNum=rowNum-1;
    	        i=i-1;
    	    }
    	 ajaxCall();
    }else
    {
    	ajaxCall();
    } 
    
} 
</script>


<body>
<form name="search" action="Apply" >
	<table class="table" align="center">
		<tr>
			<th colspan="3">
				<div style="margin-left:10px"><h2>Search your Job</h2></div>
			</th>
		</tr>
		<tr>
			<td>Salary Range(月薪范围)</td>
			<td><select  name="providesalary"  ><option value="99"  selected  >--Please Select--</option><option value="1"  >Negotiable(面议) </option><option value="2"  >Less than 1500</option><option value="3"  >1500-1999</option><option value="4"  >2000-2999</option><option value="5"  >3000-4499</option><option value="6"  >4500-5999</option><option value="7"  >6000-7999</option><option value="8"  >8000-9999</option><option value="9">More than 10000</option></select></td>
		</tr>
		<tr>
			<td>Regional(地区范围)</td>
			<td><select  name="region"  ><option value="99"  selected  >--Please Select--</option><option value="1"  >jiangsu</option><option value="2"  >shanghai</option><option value="3"  >zhejiang</option><option value="4"  >anhui</option><option value="5"  >fujian</option><option value="6"  >henan</option><option value="7"  >beijing</option><option value="8"  >hubei</option><option value="9"  >Others</option></select></td>
			
		</tr>
		<tr>
			<td>Company Size(公司规模)</td>
			<td><select  name="companysize"  ><option value="99"  selected  >--Please Select--</option><option value="1"  >Less than 50</option><option value="2"  >50-150</option><option value="3"  >150-500</option><option value= "4">More than 500</option></select></td>
        </tr>
		<tr>
			<td>Company Nature(公司性质)</td>
			<td><select  name="cotype"  ><option value="99"  selected  >--Please Select--</option><option value="1"  >Foreign(外资)</option><option value="2"  > Joint-ventured(合资)</option><option value="3"  >SOEs(国企)</option><option value="4"  >Private company(民营公司)</option><option value="5"  >Others</option></select></td>
		</tr>
		<tr>
			<td>Industry Type(行业类型)</td>
			<td><select  name="jobterm"  ><option value="99"  selected  >--Please Select--</option><option value="1"  >Computer(计算机)</option><option value="2"  >Financial(金融)</option><option value="3"  >Trade(贸易)</option><option value="4"  >Advertising(广告)</option><option value="5"  >Logistics Department(物流)</option><option value="6"  >Others</option></select></td>
		</tr>
	</table>
	
		<input class="btn btn-button" id = "btn" type="button" value="OK"  onclick="javascript:clean()">
		<div id="mess"></div>

	<table class="table" id ="checkTable">
	</table>
</form>

</body>

</html>